<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { detailApi, editApi } from '#/api/system/setting';

const key = ref('');

const [Form, formApi] = useVbenForm({
  schema: [
    {
        fieldName: 'default',
        label: '默认上传方式',
        component: 'RadioGroup',
        labelWidth: 130,
        defaultValue: 'aliyun',
        componentProps: {
        options: [
            { label: '本地', value: 'local' },
            { label: '阿里云', value: 'aliyun' },
            { label: '腾讯云', value: 'qcloud' },
            { label: '七牛云', value: 'qiniu' },
        ],
        },
        rules: 'required',
    },
    {
        fieldName: 'engine.aliyun.bucket',
        label: 'Bucket',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.access_key_id',
        label: 'AccessKeyId',
        labelWidth: 130,
        component: 'Input',
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.access_key_secret',
        label: 'AccessKeySecret',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.domain',
        label: '空间域名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.bucket',
        label: 'Bucket',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.region',
        label: '所属地域Region',
        labelWidth: 130,
        component: 'Input',
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.secret_id',
        label: 'SecretId',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.secret_key',
        label: 'SecretKey',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.domain',
        label: '空间域名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.bucket',
        label: 'Bucket',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.access_key',
        label: 'ACCESS_KEY AK',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.secret_key',
        label: 'SECRET_KEY SK',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.domain',
        label: '空间域名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    editApi(key.value, values)
      .then((res) => {
        message.success({
          content: res.message,
        });
        drawerApi.close();
      })
      .catch(() => {
        drawerApi.unlock();
      });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      if (data.key) {
        key.value = data.key;
        drawerApi.setState({ title: data.describe })
        detailApi(data.key).then((res) => {
          formApi.setValues(res.values);
        })
      }
    }
  },
  overlayBlur: 1,
  title: '',
//   class: 'w-[380px]',
});
</script>
<template>
  <Drawer>
    <Form />
  </Drawer>
</template>
